<template>
  <div class="cnode-reply-token">
    <input
      class="cnode-reply-token-input" 
      placeholder="Access Token"
      ref="input"
      v-model="accessToken">
    <button class="cnode-reply-button" @click="confirm">确定</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import post from '@/network/post'
import { SET_USER_INFO } from '@/store/appShell/common'

export default {
  data() {
    return {
      accessToken: ''
    }
  },
  mounted() {
    this.$refs.input.focus()
  },
  methods: {
    ...mapMutations('appShell/common', {
      setUserInfo: SET_USER_INFO
    }),
    async confirm() {
      if (this.accessToken === '') return 
      const res = await post(`/accesstoken`, {
        accesstoken: this.accessToken
      })
      if (res.data && res.data.success) {
        this.setUserInfo({
          accessToken: this.accessToken,
          userInfo: res.data
        })
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$main-color: #1976d2;
.cnode-reply-token {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}
.cnode-reply-token-input {
  border-bottom: 1px solid $main-color;
  height: 30px;
  outline: none;
}
.cnode-reply-button {
  font-size: 16px;
  margin-top: 20px;
  line-height: 36px;
  color: #fff;
  border-radius: 1px;
  background-color: lighten($main-color, 15);
  background-image: linear-gradient(to top, $main-color 2px, transparent 2px, transparent 100%);
}
</style>

